<template>
  <div>
    <div class="my_tab">
      <tab
        :line-width="2"
        :custom-bar-width="customBarWidth"
      >
        <tab-item
          :selected="my_select === 0"
          @on-item-click="tabsList(0)"
        >
          <p>最近学习</p>
        </tab-item>
        <tab-item
          :selected="my_select === 1"
          @on-item-click="tabsList(1)"
        >
          <p>已购课程</p>
        </tab-item>
      </tab>
    </div>

    <div
      class="slide"
      :style="`height:${WinHeight}px;width:${WinWidth}px`"
      ref="slide"
    >
      <div
        class="slide-group"
        ref="slideGroup"
        :style="`width:${tabArr.length * 100}%`"
      >
        <div
          class="item"
          v-for="(item,index) in tabArr"
          :key="index"
          :style="`height:${WinHeight}px;width:${WinWidth}px`"
        >
          <section
            ref="wrapper"
            v-if="my_select === index"
            style="height:100%;overflow: hidden;"
          >
            <div>
              <div class="container">
                <div v-if="my_select == 0">
                  <div v-if="my_list_one_status">
                    <div class="con_kong_status">
                      <img
                        src="https://o6wndwjxn.qnssl.com/%E7%BB%843@2x.png"
                        alt=""
                      >
                      <div>暂无学习记录</div>
                    </div>
                  </div>
                  <div
                    v-else
                    class="my_list_one"
                    v-for="(item,index) in my_list_one"
                    :key='index'
                    @click="my_click(item.curriculum_id,item.study_chater,item.category,item.study_log)"
                  >
                    <div class="my_list_one_img">
                      <img
                        :src="item.cover"
                        alt=""
                      >
                    </div>
                    <div class="my_list_one_con">
                      <div>
                        <p>{{item.title}}</p>
                        <p class="duoshaoren">{{item.c_number}}已学</p>
                        <!-- <section class="le_name">
                          {{item.titles}}
                        </section> -->
                        <!-- <p class="danxi1">{{item.cur_status === '0'? '系' : '单'}}</p> -->
                      </div>
                      <div>
                        <!-- <section class="popo">
                          <section class="huaxianjia">￥{{item.money/100}}</section>
                          <section class="yuanjia">￥{{item.preferential_money/100}}</section>
                        </section> -->
                      </div>
                    </div>
                  </div>
                </div>
                <div v-if="my_select == 1">
                  <div v-if="my_list_two_status">
                    <div class="con_kong_status">
                      <img
                        src="https://o6wndwjxn.qnssl.com/%E7%BB%843@2x.png"
                        alt=""
                      >
                      <div>暂无购买记录</div>
                    </div>
                  </div>
                  <div
                    v-else
                    class="my_list_one"
                    v-for="(item,index) in my_list_two"
                    :key='index'
                    @click="my_list_two_click(item)"
                  >
                    <div class="my_list_one_img">
                      <img
                        :src="item.cover"
                        alt=""
                      >
                    </div>
                    <div class="my_list_one_con">
                      <div>
                        <p v-if="item.chapter_id == 0">{{ item.title}}</p>
                        <p v-else>{{item.chapter_list.title}}</p>
                        <!-- <p class="danxi">{{item.cur_status === '0'? '系' : '单'}}</p> -->
                      </div>
                      <section class="chapters-titles">{{item.titles}}</section>
                      <p class="duoshaoren">{{item.c_number}}已学</p>
                      <!--<div v-if="item.count != 1">共计24课时 <span v-if="item.count != 1">系列课</span></div>
            <div v-else>{{item.snumber}}次学习</div> -->
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </section>
        </div>
      </div>
    </div>
    <div style="height: 50px;"></div>
    <bottomtab></bottomtab>
  </div>
</template>
<script>
import bottomtab from '@/components/public/tab'
import {
  user_ke,
  search_popularity
} from '@/api/mycourse'
import {
  mapState
} from 'vuex'
import list from '@/components/public/list'
import BScroll from 'better-scroll'
import {
  Tab,
  TabItem,
  LoadMore
} from 'vux'
export default {
  components: {
    bottomtab,
    Tab,
    TabItem,
    list,
    LoadMore

  },
  mounted () {
    this.customBarWidth = (36 / 750) * 100 + 'vw'
    this.$nextTick(() => {
      this.initTab()
      this.initWrapper()
      this.WinHeight = document.documentElement.clientHeight - 97
      this.WinWidth = document.documentElement.clientWidth
    })
  },
  watch: {
    osos (v) {
      this.my_select = this.slide.getCurrentPage().pageX
      this.initWrapper()
    }
  },
  computed: {
    ...mapState({
      user_id: state => state.member_id
    })
  },
  data () {
    return {
      sel: 0,
      osos: '',
      WinHeight: '',
      WinWidth: '',
      tabArr: [0, 1],
      customBarWidth: '',
      my_select: 0,
      my_list_one: [],
      my_list_two: [],
      my_page_one: 1,
      my_page_two: 1,
      my_list_one_status: false,
      my_list_two_status: false,
      co_video_Recommend_list: []

    }
  },
  created () {
    this.getUserKeone()
    this.getUserKetwo()
    this.getRecommend()
  },
  methods: {
    initWrapper () {
      this.$nextTick(() => {
        this.scroll = new BScroll(this.$refs.wrapper[0], {
          click: true,
          scrollY: true,
          scrollX: false,
          tap: true,
          bounce: false,
          probeType: 3,
          pullUpLoad: {
            threshold: 10
          }
        })
        // 上拉加载
        this.scroll.on('pullingUp', () => {
          if (this.my_select === 0) {
            if (this.status === 1) {
              this.getUserKeone()
              this.status = ''
            }
          } else {
            if (this.status === 1) {
              this.getUserKetwo()
              this.status = ''
            }
          }
          this.scroll.finishPullUp()
          this.scroll.refresh()
        })
        this.scroll.on('scroll', function (ob) {
          this.scrollY = ob.y
        })
      })
    },
    initTab () {
      this.$nextTick(() => {
        let _this = this
        this.slide = new BScroll(this.$refs.slide, {
          scrollX: true,
          scrollY: false,
          momentum: false,
          pullUpLoad: {
            threshold: 0
          },
          snap: {
            loop: false,
            threshold: 0,
            speed: 300
          },
          bounce: false,
          stopPropagation: true,
          click: this.click
        })
        this.slide.on('scrollEnd', function (ob) {
          _this.osos = ob.x
        })
      })
    },
    my_click (e, c, s, index) {
      // 1语音课程 2图文课程 3视频课程
      var route = 0
      if (s == 1) {
        route = 'co_audio'
      }
      if (s == 2) {
        route = 'co_text'
      }
      if (s == 3) {
        route = 'co_video'
      }
      this.$router.push({
        path: '/' + route,
        query: {
          curriculum_id: e,
          chapter_id: c,
          c: index - 1
        }
      })
    },
    my_list_two_click (e) {
      if (e.chapter_id !== 0) {
        if (e.category === '3') {
          this.$router.push({
            path: 'co_video',
            query: {
              curriculum_id: e.curriculum_id,
              chapter_id: e.chapter_id,
              c: e.ds - 1
            }
          })
        } else if (e.category === '1') {
          this.$router.push({
            path: '/co_audio',
            query: {
              curriculum_id: e.curriculum_id,
              chapter_id: e.chapter_id,
              c: e.ds - 1
            }
          })
        } else if (e.category === '2') {
          this.$router.push({
            path: '/co_text',
            query: {
              curriculum_id: e.curriculum_id,
              chapter_id: e.chapter_id,
              c: e.ds - 1
            }
          })
        }
        return
      }
      if (window.__wxjs_is_wkwebview !== true) {
        this.$router.push({
          path: '/coursedetails',
          query: {
            curriculumId: e.curriculum_id
          }
        })
      } else {
        window.location.href = `/coursedetails?curriculumId=${e.curriculum_id}`
      }
    },
    tabsList (e) {
      // this.my_select = e
      this.slide.goToPage(e)
    },

    getUserKeone (e) {
      let requery = {
        app_id: this.app_id,
        user_id: this.user_id,
        type: 0,
        page: this.my_page_one,
        pageshow: 10
      }
      user_ke(requery).then(res => {
        this.$store.commit('updateLoadingStatus', { isLoading: false })
        this.status = 1
        let {
          code,
          data
        } = res.data
        if (code === 200) {
          if (this.my_page_one === 1) {
            this.my_list_one = data
          } else {
            this.my_list_one = this.my_list_one.concat(data)
          }
          this.my_page_one = this.my_page_one + 1
        } else {

        }
      })
    },
    getUserKetwo (e) {
      let requery = {
        app_id: this.app_id,
        user_id: this.user_id,
        type: 1,
        page: this.my_page_two,
        pageshow: 10
      }
      user_ke(requery).then(res => {
        this.status = 1
        let {
          code,
          data
        } = res.data
        if (code === 200) {
          if (this.my_page_one === 1) {
            this.my_list_two = data
          } else {
            this.my_list_two = this.my_list_two.concat(data)
          }
          this.my_page_two = this.my_page_two + 1
        } else {
          // if (e == 1) {
          //   this.my_text_two = '没有更多了'
          // } else {
          //   this.my_list_one_status = false
          // }
        }
      })
    },
    getRecommend () {
      let requery = {
        app_id: this.app_id
      }
      search_popularity(requery).then(res => {
        let {
          code,
          data
        } = res.data
        if (code == 200) {
          this.co_video_Recommend_list = data
        }
      })
    }

  }
}
</script>

<style lang="less" scoped>
.duoshaoren {
  position: absolute;
  bottom: 0;
  left: 0;
  font-family: PingFangSC-Regular;
  font-size: 11px;
  color: #999999;
}
.slide {
  width: 100%;
  overflow: hidden;
  margin-top: 50px;
}
.slide-group {
  display: flex;
}
.chapters-titles {
  font-family: PingFangSC-Regular;
  font-size: 12px;
  color: #999999;
  letter-spacing: 0;
  margin-top: calc(100vw * 26 / 750);
}
.popo {
  display: inline-block;
  position: absolute;
  right: 0px;
}
.yuanjia {
  font-family: PingFangSC-Medium;
  font-size: 15px;
  color: #f24724;
  display: inline-block;
  letter-spacing: 0;
  height: 100%;
}
.huaxianjia {
  font-family: PingFangSC-Regular;
  font-size: 12px;
  color: #b3b3b3;
  right: 0;
  height: 100%;
  display: inline-block;
  text-decoration: line-through;
}
.le_name {
  text-overflow: ellipsis;
  display: -webkit-box;
  /* -webkit-box-orient: vertical; */
  /*! autoprefixer: off */
  -webkit-box-orient: vertical;
  /* autoprefixer: on */
  -webkit-line-clamp: 1;
  overflow: hidden;
  margin-top: calc(100vw * 5 / 750);
  font-size: 12px;
  color: #999999;
  width: 95%;
  font-weight: normal;
}
.con_kong_status {
  overflow: hidden;
}

.con_kong_status > img {
  width: 50%;
  margin: 50px 3% 0px 34%;
}

.con_kong_status > div {
  text-align: center;
  font-size: 15px;
  color: #666666;
  margin-bottom: 100px;
}

.my_tab {
  width: 100%;
  height: 44px;
  position: fixed;
  left: 0;
  top: 0;
  background: white;
  z-index: 100;
}

.container {
  width: 90%;
  margin: 0 5%;
}

.vux-tab .vux-tab-item.vux-tab-selected {
  font-weight: bold;
}

.my_list_one {
  width: 100%;
  display: flex;
  height: calc(100vw * 145 / 750);
  margin-bottom: 27px;
  // margin-bottom: 27px;
}

.my_list_one_img {
  width: calc(100vw * 264 / 750);
  height: calc(100vw * 145 / 750);
  overflow: hidden;
}

.my_list_one_img > img {
  width: 100%;
  height: calc(100vw * 145 / 750);
  object-fit: cover;
  border-radius: 4px;
}
.my_list_one_con {
  flex: 1;
  margin-left: calc(100vw * 20 / 750);
  position: relative;
}

.my_list_one_con > div:nth-child(1) {
  font-size: calc(100vw * 30 / 750);
  color: #1a1a1a;
  font-weight: bold;
}
.my_list_one_con > div:nth-child(2) {
  position: absolute;
  bottom: 1vh;
  left: 15px;
  width: calc(100% - 30px);
  height: 20px;
  line-height: 20px;
  font-size: 12px;
  color: #999999;
}

.my_list_one_con > div:nth-child(2) span {
  position: absolute;
  bottom: 0;
  right: 0;
  display: inline-block;
  line-height: 16px;
  font-size: 12px;
  color: #f29911;
  border-radius: 500px;
  border: 1px solid #f29911;
  padding: 0 8px;
}

.my_list_one_con > div:nth-child(1) p {
  text-overflow: ellipsis;
  display: -webkit-box;
  /* -webkit-box-orient: vertical; */
  /*! autoprefixer: off */
  -webkit-box-orient: vertical;
  /* autoprefixer: on */
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.my_mone {
  height: 60px;
  line-height: 80px;
  text-align: center;
  font-size: 15px;
  color: #f39800;
}

.co_video_Recommend_title {
  width: 100%;
  height: 55px;
  line-height: 55px;
  font-size: 18px;
  color: #1a1a1a;
  font-weight: bold;
}

.co_video_Recommend {
  width: 90%;
  margin: 0 5%;
  position: relative;
}
.danxi {
  width: 18px;
  height: 18px;
  background: #f39800;
  color: #fff;
  font-size: 12px;
  line-height: 18px;
  text-align: center;
  color: #fff;
  position: absolute;
  right: 0px;
}
.danxi1 {
  width: 18px;
  height: 18px;
  background: #f39800;
  color: #fff;
  font-size: 12px;
  line-height: 18px;
  text-align: center;
  color: #fff;
  position: absolute;
  bottom: 0;
}
</style>
